@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/order.css')}}">
<style  type="text/css">
.pj_box {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.2);
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
}
.box_flex {
    display:flex;
    align-items:center;
    width:100%;
    height:100%;
    justify-content:center;
}
.box_cont {
    width:621px;
    background-color: #fff;
    padding: 0 20px;
    padding-bottom: 40px;
}
.box_top {
    display:flex;
    align-items:center;
    padding-top:20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}
.line {
    width:8px;
    height:30px;
    background:rgba(209,0,24,1);
    border-radius:4px;
}
.top_text {
    font-size:18px;
    color:rgba(51,51,51,1);
    margin-left: 20px;
}
.closePj {
    cursor : pointer;
    font-size: 18px;
    color: #333;
    margin-left: 465px;
}
.cont_box {
    margin-top: 20px;
}
.cont_top {
    display:flex;
    align-items:flex-end;
}
.img {
    width:60px;
    height:60px;
}
.pf {
    display:flex;
    margin-left:20px;
    align-items:center;
}
.pf_text {
    font-size:16px;
    color:rgba(51,51,51,1);
}
.pf_img {
    display:flex;
    align-items:center;
}
.pf_img>img {
    width:20px;
    margin-top: -4px;
    margin-right: 5px;
    cursor: pointer;
}
.textarea {
    width:100%;
    height:105px;
    border:1px solid rgba(112,112,112,1);
    margin-top: 12px;
    padding: 10px;
}
.img_box {
    margin-top:12px;
    display:flex;
    flex-wrap: no-wrap;
}
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 2px;
    margin-right:10px;
}
.submit {
    width:160px;
    height:40px;
    background:rgba(209,0,24,1);
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    margin-top: 20px;
    font-size:16px;
    color:rgba(255,255,255,1);
    cursor: pointer;
}
</style>
@section('content')
<div class="mainHrContent" id="hrOrder" >
    <div class="storelistTitle" id="storelistTitle"  v-cloak>
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.hrmy.hrIndex') }}">用户中心</a>
                > 订单管理中心
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.hrmy.menu')
        <div class="basicInfo" id="hrOrders" v-cloak>
            <div class="basicInfo_title">
                <span></span>
                订单管理中心
            </div>
            <div class="orderMain">
                <div class="orderMain_header">
                    <span>订单状态：</span>
                    <button :class="{active:state_type==0}" @click="state_type=0">全部</button>
                    <button :class="{active:state_type==1}" @click="state_type=1">
                        <img src="{{URL::asset('./img/icon/order_1.png')}}">
                        待付款
                    </button>
                    <button :class="{active:state_type==2}" @click="state_type=2">
                        <img src="{{URL::asset('./img/icon/order_2.png')}}">
                        待发货
                    </button>
                    <button :class="{active:state_type==3}" @click="state_type=3">
                        <img src="{{URL::asset('./img/icon/order_3.png')}}">
                        待收货
                    </button>
                    <button :class="{active:state_type==4}" @click="state_type=4">
                        <img src="{{URL::asset('./img/icon/order_4.png')}}">
                        待评价
                    </button>
                </div>
                <div class="orderMain_thead">
                    <span class="table_1">
                        订单详情
                    </span>
                    <span class="table_2">
                        金额
                    </span>
                    <span class="table_3">
                        交易状态
                    </span>
                    <span class="table_4">
                        操作
                    </span>
                </div>
                <div class="orderMain_tbody" v-for="items in listData">
                    <div class="tbody_thead spanBody">
                            <span>
                                <p>订单号：@{{items.order_sn}}</p>
                                <p>下单时间：@{{items.created_at}}</p>
                                <p>@{{items.store_name}}</p>
                            </span>
                            <!-- <span style="cursor: pointer;" v-if="items.is_delete==1" @click="changeState(items.id,3)">
                                <img src="{{URL::asset('./img/icon/order_8.png')}}">
                                删除
                            </span> -->
                            <span style="cursor: pointer;width:80px" @click="changeState(items.id,3)">
                                <img src="{{URL::asset('./img/icon/order_8.png')}}">
                                删除
                            </span>
                        <!-- <p>@{{items.reciver_info.realname}} @{{items.reciver_info.phone}} @{{items.reciver_info.area}}  @{{items.reciver_info.detail}}</p> -->
                    </div>
                    <div class="tbody_tbody" v-for="item in items.goods_list">
                        <span class="table_1">
                            <img :src="item.goods_image">
                            <span><a :href="'{{route('home.goods.goodsDetails') }}?goodsId='+item.goods_id+'&type='+item.goods_type">
                                    @{{item.goods_name}}</a>
                            </span>
                            <span v-if="item.goods_type!=3">
                                <i style="font-style:normal;" v-if="item.goods_price!=0.00">￥@{{item.goods_price}}</i>
                                <i style="font-style:normal;" v-else>免费</i>
                            </span>
                            <span v-else>
                                <i style="font-style:normal;" v-if="item.goods_price!=0.00">@{{item.goods_price}}积分</i>
                                <i style="font-style:normal;" v-else>免费</i>
                            </span>
                            {{--<span>￥@{{item.goods_price}}</span>--}}
                            <span>1</span>
                        </span>
                        <span class="table_2">
                            <p v-if="item.goods_type!=3">
                                <span v-if="item.goods_pay_price!=0.00">￥@{{item.goods_pay_price}}</span>
                                <span v-else>免费</span>
                            </p>
                            <p v-else>
                                <span v-if="item.goods_pay_price!=0.00">@{{item.goods_pay_price}}积分</span>
                                <span v-else>免费</span>
                            </p>
                            <p>@{{items.pay_method==1?'微信支付':'积分兑换'}}</p>
                        </span>
                        <span class="table_3">
                            <p>@{{items.order_state==1?'已取消':items.order_state==2?'未付款':items.order_state==3?'已付款':items.order_state==4?'已发货':'已收货'}}</p>
                            <p v-if="items.is_logistics==1" @click="showWuliu(items.shipping_code,items.shipping_sn)">查看物流编号</p>
                        </span>
                        <span class="table_4">
                            <button
                            @click="window.location.href ='{{ route('home.order.payOrder') }}?orderId='+items.id" 
                            v-if="items.order_state==2 && items.is_pay==1" style="margin-bottom:10px;">
                                付款
                            </button>
                            <button v-if="items.order_state==2 && items.is_cancel==1" @click="changeState(items.id,1)">
                                <img src="{{URL::asset('./img/icon/order_5.png')}}">
                                取消订单
                            </button>
                            <button v-if="items.order_state==4" @click="changeState(items.id,2)">
                                <img src="{{URL::asset('./img/icon/order_6.png')}}">
                                确认收货
                            </button>
                            <!-- <button v-if="items.order_state==5 && items.is_evaluation==1" @click=" window.location.href = '{{ route('home.goods.goodsDetails') }}?goodsId='+item.goods_id+'&type='+item.goods_type+'&is_evaluate=1'"> -->
                            <button v-if="items.order_state==5 && items.is_evaluation==1" @click.stop="showPj(items)">
                                <img src="{{URL::asset('./img/icon/order_7.png')}}">
                                评&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    订单管理中心
                    <a class="dialogFalse" @click="dialogVisible=false">×</a>
                </div>
                <div class="dialogMain">
                    <p>物流公司：@{{copyCode}}</p>
                    <p>物流单号：@{{copyText}}
                        <button class="copyBtn" :data-clipboard-text="copyText">复制</button>
                    </p>
                </div>
            </el-dialog>
            <div class="elementPage" style="margin-top: 20px;" v-if="pageCount>0">
                <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                </el-pagination>
            </div>
            <div class="pj_box" v-show="pjShow">
            <!-- <div class="pj_box"> -->
            <div class="box_flex">
                <div class="box_cont">
                    <div class="box_top">
                        <p class="line"></p>
                        <p class="top_text">评价商品</p>
                        <p class="closePj" @click="closePj">X</p>
                    </div>
                    <div class="cont_box" v-for="(item,index) in items.goods_list" :key="index">
                        <div class="cont_top">
                            <img class="img" :src="item.goods_image">    
                            <p class="pf">
                                <span class="pf_text">商品星级：</span>
                                <span class="pf_img">
                                    <img v-for="(item,index1) in workPac.T" @click="workPcT(index1,index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                                    <img v-for="(item,index1) in workPac.F" @click="workPcF(index1,index)" src="{{URL::asset('./img/store/huixing.png')}}">
                                </span>
                            </p>
                        </div>
                        <textarea class="textarea" v-model="item.content"></textarea>
                        <div class="img_box" @click="setIndex(index)">
                        <img v-for="item in item.images" :src="item" class="avatar">
                            <el-upload class="avatar-uploader" name="image"
                                    :action="uploadImgUrl"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                    <div class="submit" @click="submit">立即评价</div>
                </div>
        </div>
    </div>
        </div>
    </div>
    
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrOrder = new Vue({
            el: '#hrOrders',
            data: () => {
                return {
                    imageUrl: '',
                    uploadUrl: UPLOAD_FILE,
                    uploadImgUrl: UPLOAD_IMG,
                    pageNumber: 1,
                    pageCount: 0,
                    listData: [],
                    state_type: 0,
                    dialogVisible: false,
                    status: 3,
                    copyCode: '',
                    copyText: '',
                    workPac: {
                        T: 0,
                        F: 5,
                    },
                    pjShow: false,
                    evaluate_array:[],
                    items:{},
                    index:0
                }
            },
            watch: {
                state_type(newV) {
                    this.getList();
                }
            },
            created() {
                this.getList();
            },
            mounted() {
                
                let clipboard = new ClipboardJS('.copyBtn');
                clipboard.on('success', (e) => {
                    // console.info('Text:', e.text);
                    this.$message({
                        message: '复制成功',
                        type: 'success'
                    });
                    this.dialogVisible = false;
                    e.clearSelection();
                });

                clipboard.on('error', (e) => {
                    this.$message.error('复制失败');
                });
            },
            methods: {
                setIndex(index){
                    this.index = index
                },
                handleAvatarSuccess(res, file) {
                    if(this.items.goods_list[this.index].images.length > 4) return this.$message.error('最多只能上传五张图片');
                    // this.items.goods_list[this.index].images.push(URL.createObjectURL(file.raw));
                    this.items.goods_list[this.index].images.push(file.response.data.path)
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                showPj(items){
                    this.items = items;
                    this.items.goods_list.map(item=>{
                        this.$set(item,'content','')
                        this.$set(item,'images',[])
                        this.$set(item,'average_star',[])
                    })
                    this.pjShow = true
                },
                closePj(){
                    this.pjShow = false
                },
                workPcT(index,index1) {
                    this.workPac.T = index + 1
                    this.workPac.F = 5 - this.workPac.T
                    this.items.goods_list[index1].average_star = this.workPac.T
                },
                workPcF(index,index1) {
                    if (this.workPac.T != 0) {
                        this.workPac.T = this.workPac.T + index + 1
                    } else {
                        this.workPac.T = index + 1
                    }
                    this.workPac.F = 5 - this.workPac.T
                    this.items.goods_list[index1].average_star = this.workPac.T
                },
                submit(){
                    let arr = []
                    for ( var i=0;i<this.items.goods_list.length;i++){
                        if(!this.items.goods_list[i].content) return this.$message({
                                message: '请输入您的评论',
                                type: 'warning'
                            });
                            arr.push({
                            order_id:this.items.id,
                            goods_id:this.items.goods_list[i].goods_id,
                            average_star:this.items.goods_list[i].average_star,
                            content:this.items.goods_list[i].content,
                            images:this.items.goods_list[i].images.join(',')
                        })
                    }
                    apiAjax("{{ route('home.user.hrGoodsEvaluatesApi')}}", 'post', {
                        evaluate_array: JSON.stringify(arr)
                    }, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: "评价成功",
                                type: 'success'
                            });
                            this.pjShow = false;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getList() {
                    let data = {
                        page: this.pageNumber,
                        state_type: this.state_type
                    }
                    apiAjax("{{ route('home.user.hrOrderListApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.pageCount = res.data.total;
                            this.listData = res.data.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                showWuliu(code, sn) {
                    this.copyCode = code;
                    this.copyText = sn;
                    this.dialogVisible = true;
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList();
                },
                handleClose(done) {
                    this.dialogVisible = false;
                },
                changeState(id, state) {
                    let data = {
                        order_id: id,
                        state_type: state,
                    }
                    apiAjax("{{ route('home.user.hrOrderChangeStateApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                }
            }
        })
    })
</script>
@endsection